<template>
  <div class="app-home page">
    <div class="wrapper" ref="webview">
      <div class="home-header">
        <div class="header-top">
          <div class="logo"></div>
          <div class="search">
            <van-field v-model="textValue" readonly class="input" @click="goSearch" :clearable='true' placeholder="搜索商品/店铺">
              <template #left-icon>
                <i class="icon-search"></i>
              </template>
            </van-field>
          </div>
        </div>
        <van-swipe :autoplay="3000" class="home-swipe">
          <van-swipe-item v-for="(banner, index) in bannerList" :key="index">
            <div class="img">
              <van-image width="100%" :height="$tools.toPX(320)" lazy-load :src="banner.ad_file">
                <template v-slot:loading>
                  <van-loading type="spinner" size="24" />
                </template>
              </van-image>
            </div>
          </van-swipe-item>
        </van-swipe>
        <div class="lines"></div>
      </div>
      <div class="home-content">
        <div class="store-selection">
          <div class="title">店铺精选</div>
          <div class="content">
            <template v-for="(item,index) in shopList">
              <div class="row" :key="index" @click="$router.push({ path: '/store', query: { id: item.id } });">
                <van-image width="100%" height="100%" fit="scale-down" lazy-load :src="item.elite_img">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="24" />
                  </template>
                </van-image>
              </div>
            </template>
            <!-- <div class="row"></div> -->
          </div>
        </div>
        <div class="product-list" v-for="(item, index) in floorList" :key="index">
          <!--标题-->
          <div class="pro-title">
            <span class="name">{{item.floor_name}}</span>
          </div>
          <!--广告-->
          <div class="pro-ad">
            <van-image width="100%" lazy-load :src="item.add_url">
              <template v-slot:loading>
                <van-loading type="spinner" size="24" />
              </template>
            </van-image>
          </div>
          <product-list :product="item.goodsList" :width="314" />
        </div>
        <!-- <div class="pro-title-news">
          <span class="name">精挑新品</span>
        </div>
        <div class="product-list">
          <product-list :product="dataList" :width="314" />
        </div> -->
      </div>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
// import { mapGetters } from 'vuex';
import mixins from '@/utils/mixins';
export default {
  name: 'home',
  data () {
    return {
      isActive: 1,
      bannerList: [],
      textValue: '',
      messageList: [],
      goodsList: [],
      shopList: [],
      floorList: [],
      apiUrl: 'goods',
      apiType: 'goods',
      params: {}
    };
  },
  components: {},
  mixins: [mixins],
  // 缓存了页面使用 created钩子
  created () {
    this.getBanner();
    this.getShopList();
    this.getFloorList();
  },

  mounted () {
    this.params = {
      isNew: 1
    };
    this.getList('goods', true);
  },
  methods: {
    // 跳转搜索
    goSearch () {
      this.$router.push({ path: '/search' });
    },
    getBanner () {
      let params = {
        code: 'index'
      };
      this.$API.global.getBannerList(params).then(res => {
        this.bannerList = res.data;
      });
    },
    goGoods (id) {
      this.$router.push({ path: '/mall/goods', query: { id: id } });
    },
    getMessage () {
      this.$API.global.message().then(res => {
        this.messageList = res.data;
      });
    },
    getShopList () {
      this.$API.global.getShopList().then(res => {
        if (!res.code) {
          this.shopList = res.data;
        }
      });
    },
    getFloorList () {
      this.$API.global.getFloorList().then(res => {
        if (!res.code) {
          this.floorList = res.data;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.app-home {
  display: flex;
  flex-direction: column;
  .wrapper {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .header-top {
    padding-top: calc(0lines + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-between;
    .logo {
      width: 140px;
      height: 66px;
      background-image: url('/static/img/home-logo.png');
      background-repeat: no-repeat;
      background-size: 120px 40px;
      background-position: left center;
    }
    .search {
      flex: 1;
      .input {
        padding: 15px 20px 10px;
        width: 100%;
        border-radius: 56px;
        .icon-search {
          width: 31px;
          height: 32px;
          background-image: url('/static/img/icon-search.png');
          background-repeat: no-repeat;
          display: inline-block;
          background-size: contain;
          margin-right: 16px;
          position: relative;
          top: 4px;
          background-position: center center;
        }
      }
    }
  }
  .home-header {
    width: 110%;
    margin: 0 -5%;
    padding: 18px calc(25px + 5%);
    position: relative;
    border-radius: 0 0 16% 16%;
    background: linear-gradient(259deg, rgba(239, 0, 62, 1) 0%, rgba(253, 32, 77, 1) 100%, rgba(255, 39, 83, 1) 100%);
    .home-swipe {
      height: 320px;
      border-radius: 10px;
      margin-top: 20px;
      overflow: hidden;
      background-color: rgba(253, 32, 77, 1);
      .img {
        width: 100%;
        background-color: #eee;
        height: 320px;
        img {
          vertical-align: top;
        }
      }
      /deep/ .van-swipe__indicators {
        bottom: 20px;
      }

      /deep/ .van-swipe__indicator {
        width: 20px;
        height: 5px;
        background: #f1f3f7;
        border-radius: 3px;
        opacity: 0.5;

        &:not(:last-child) {
          margin-right: 8px;
        }
      }

      /deep/ .van-swipe__indicator--active {
        width: 20px;
        height: 5px;
        background: #fff;
        border-radius: 3px;
        opacity: 1;
      }
    }
    .lines {
      height: 160px;
    }
  }
  .home-content {
    position: relative;
    border-radius: 10px;
    padding-bottom: 25px;
    margin: 0 25px;
    // background-color: #fff;
    .store-selection {
      padding: 25px;
      margin-top: -160px;
      height: 290px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 10px 15px 0px rgba(221, 221, 221, 0.3);
      border-radius: 10px;
      .title {
        font-size: 34px;
        color: #000;
      }
      .content {
        display: flex;
        margin-top: 15px;
        .row {
          width: 50%;
          // flex: 1;
          background-color: #eee;
          height: 180px;
          border-radius: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .row:first-child {
          margin-right: 20px;
        }
      }
    }
    .content-head {
      z-index: 1;
      position: absolute;
      top: 0;
      width: 100%;
      height: 58px;
      border-radius: 10px 10px 0 0;
      background: linear-gradient(180deg, rgba(223, 218, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
      opacity: 0.93;
    }
    .headline {
      display: flex;
      height: 92px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #353535;
      align-items: center;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      padding: 0 27px;
      .icon {
        z-index: 2;
        width: 143px;
        height: 30px;
        background-repeat: no-repeat;
        display: inline-block;
        background-position: center center;
        background-size: contain;
        background-image: url('/static/images/icon-headline.png');
        margin-right: 20px;
      }
      .vertical-swipe {
        flex: 1;
        z-index: 99;
        height: 40px;
        margin-top: 5px;
        .swipe,
        .swipe-item {
          height: 40px;
        }
      }
    }
    .pro-title-news {
      padding: 30px 0 14px;
      text-align: center;
      .name {
        border-bottom: 4px solid #ff0034;
        padding-bottom: 8px;
        font-size: 34px;
        color: #000;
        font-weight: 800;
      }
    }
  }
}
</style>
